<template>
    <div class="container container-talentDetail">
        <a-spin tip="Loading..." :spinning="loading">
            <div class="page-content">
                <div class="page-content-left">
                    <div class="list-top">
                        <div class="list-left">
                            <div>
                                <img class="list-header" :src="userInfo.headPortrait || require('@/assets/img/user.png')" />
                            </div>
                            <div class="list-user">{{userInfo.name}}</div>
                            <div class="list-info" v-if="userInfo.territory">
                                <template v-for="(item,idx) in JSON.parse(userInfo.territory)">
                                    <div class="my-type-list" :key="item" v-if="idx<2">
                                        {{item}}
                                    </div>
                                </template>
                            </div>
                        </div>
                        <div class="list-right">
                            <div class="list-info" v-if="userInfo.placeCollege">
                                <span class="info-title">所属学院：</span>
                                <div class="info-words text-nowarp">
                                    <template v-for="(item,idx) in JSON.parse(userInfo.placeCollege)">
                                        {{item}},
                                    </template>
                                </div>

                            </div>
                            <div class="list-info" v-if="userInfo.placeUnit">
                                <span class="info-title">所属单位：</span>
                                <span class="info-words">{{userInfo.placeUnit}}</span>
                            </div>
                            <div class="list-info">
                                <span class="info-title">联系方式：</span>
                                <span class="info-words">{{userInfo.phone}}</span>
                            </div>
                            <div class="list-info" v-if="userInfo.email">
                                <span class="info-title">邮箱：</span>
                                <span class="info-words">{{userInfo.email}}</span>
                            </div>

                        </div>
                    </div>
                    <div class="talent-info-box" v-if="pageType!==''">
                        <div class="talent-panel-title">
                            <span>专家信息介绍</span>
                            <span class="auth-type type-danger">已认证</span>
                        </div>
                        <div class="talent-info">
                            <template v-if="userInfo.briefIntroduction">
                                <div class="talent-info-title">简介</div>
                                <div class="talent-info-words">
                                    <div v-for="item in userInfo.briefIntroduction.split('\n')">
                                        {{item}}
                                    </div>
                                </div>
                            </template>
                            <template v-if="userInfo.difficultyBreakThrough">
                                <div class="talent-info-title">难点突破</div>
                                <div class="talent-info-words">
                                    <div v-for="item in userInfo.difficultyBreakThrough.split('\n')">
                                        {{item}}
                                    </div>
                                </div>
                            </template>
                            <template v-if="userInfo.coreTechnology">
                                <div class="talent-info-title">核心技术</div>
                                <div class="talent-info-words">
                                    <div v-for="item in userInfo.coreTechnology.split('\n')">
                                        {{item}}
                                    </div>
                                </div>
                            </template>
                            <template v-if="userInfo.promotionUse">
                                <div class="talent-info-title">应用推广</div>
                                <div class="talent-info-words">
                                    <div v-for="item in userInfo.promotionUse.split('\n')">
                                        {{item}}
                                    </div>
                                </div>
                            </template>
                            <template v-if="userInfo.earlierStageAchievement">
                                <div class="talent-info-title">前期成果</div>
                                <div class="talent-info-words">
                                    <div v-for="item in userInfo.earlierStageAchievement.split('\n')">
                                        {{item}}
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                    <div class="talent-info-box" v-else>
                        <div class="talent-panel-title">
                            <span>技术经纪人</span>
                        </div>
                        <div class="talent-info">
                            <div class="talent-info-title">历史评价</div>
                            <div class="talent-info-evaluate">
                                <i class="iconfont evaluate-ico" v-for="(item,idx) in 5">
                                    {{idx<=5?'\ue86d':'\ue600'}}
                                </i>
                                <span>5</span>
                            </div>

                            <div class="talent-info-title">所属单位</div>
                            <div class="talent-info-words">
                                {{userInfo.placeUnit}}
                            </div>

                            <div class="talent-info-title">能力等级</div>
                            <div class="talent-info-words">{{userInfo.capabilityLevel}}</div>

                            <template v-if="userInfo.skillBriefIntroduction">
                                <div class="talent-info-title">个人简介</div>
                                <div class="talent-info-words">
                                    <div v-for="item in userInfo.skillBriefIntroduction.split('\n')">
                                        {{item}}
                                    </div>
                                </div>
                            </template>

                            <template v-if="userInfo.skillCorrelationPicture">
                                <div class="talent-info-title">相关图片</div>
                                <div>
                                    <div class="talent-info-imgbox" v-for="item in JSON.parse(userInfo.skillCorrelationPicture)">
                                        <img class="talent-info-img" :src="item" />
                                    </div>
                                </div>
                            </template>

                        </div>
                    </div>
                </div>
                <div class="page-content-right">
                    <div class="type-panel">
                        <span class="type-list" :class="pageParams.type===1&&'type-list-sel'"
                            @click="pageTypeChange(1)">发布的需求</span>
                        <span class="type-list" :class="pageParams.type===2&&'type-list-sel'"
                            @click="pageTypeChange(2)">发布的成果</span>
                        <span class="type-list" :class="pageParams.type===3&&'type-list-sel'"
                            @click="pageTypeChange(3)">已转化成果</span>
                    </div>
                    <div class="an-list" v-for="item in rightInfo" @click="jumpDemandAch(item.id)">
                        <div class="an-left">
                            <img class="an-left-bg" :src="item.coverImageUrl" v-if="pageParams.type===1" />
                            <img class="an-left-bg" :src="item.coverPicture" v-else />
                        </div>
                        <div style="flex-grow:1;width:1px;margin-left:20px">
                            <div class="an-l-title text-nowarp">{{pageParams.type===1?item.demandName:item.achievementName}}</div>
                            <div class="an-l-type" v-if="pageParams.type===1">
                                <div class="my-type-list" v-for="item in item.subCategory" :key="item">{{item}}</div>
                            </div>
                            <div class="an-l-type" v-else>
                                <div class="my-type-list" v-for="item in item.belongToTechnologyCategory" :key="item">{{item}}
                                </div>
                            </div>
                            <div class="an-l-info">发布人：{{item.issuer}}</div>
                            <div class="an-l-info">
                                <span v-if="item.location">
                                    <span>{{JSON.parse(item.location).province + JSON.parse(item.location).city + JSON.parse(item.location).district}}</span>
                                </span>
                            </div>
                            <div class="an-l-bottom text-nowarp">{{userInfo.placeUnit}}</div>
                        </div>
                    </div>
                    <div class="list-null" v-if="!rightInfo || rightInfo.length===0" style="padding-top:50px">
                        <div class="iconfont">&#xe642;</div>
                        <div>暂无数据</div>
                    </div>

                    <!-- <div style="text-align:right;margin-top:20px">
                        <a-pagination v-model="pageNum" :pageSize="pageSize" :total="total" show-less-items @change="pageChange"  />
                    </div> -->

                </div>
            </div>
            <div class="page-bottom" v-if="pageType!==''">
                <template v-if="userInfo.correlationPicture">
                    <div class="page-bottom-content">
                        <div class="page-bottom-title">相关图片</div>
                        <div class="page-bottom-box">
                            <div class="page-bottom-list" v-for="item in JSON.parse(userInfo.correlationPicture)">
                                <img class="page-bottom-bg" :src="item" />
                            </div>
                        </div>
                    </div>
                </template>

            </div>
            <div class="page-bottom" v-else-if="userInfo.practitionerCase">
                <div class="page-bottom-content">
                    <div class="page-bottom-title">从业案例</div>
                    <div class="page-bottom-box">
                        <div style="width:32%;display:inline-block;margin-right:1%" v-for="item in JSON.parse(userInfo.practitionerCase)">
                            <div class="an-list">
                                <div style="flex-grow:1;width:1px;padding:20px">
                                    <div class="an-l-title text-nowarp">{{item.name}}</div>
                                    <div class="an-l-info">日期：{{item.date}}</div>
                                    <div class="an-l-info">转化类型：{{item.type}}</div>
                                    <div class="an-l-info">促成转化金额：{{item.money}}万元</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </a-spin>
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { UserModule } from "@/store/modules/userModules";
import { getStorageUserInfo } from "@/utils";
import { Vue, Component } from "vue-property-decorator";
@Component({
    name: "dom",
    components: {},
})
export default class index extends Vue {
    pageParams = {
        type: 1,
    };
    pageSize = 4;
    pageNum = 1;
    total = 0;
    detailInfo: any = {};
    userInfo = {};
    pageId = "";
    loading = false;
    pageType = "";
    mounted() {
        const userInfo = getStorageUserInfo();
        if (!userInfo || !userInfo.token) {
            UserModule.setShowLoginPanel(true)
            this.$message.warning("登录失效");
            this.$router.go(-1);
            return;
        }
        const query = this.$route.query;
        this.pageId = query.id ? query.id + "" : "";
        this.pageType = query.pageType ? query.pageType + "" : "";
        this.getDetail();
    }
    async getDetail() {
        this.loading = true;
        try {
            const res = await api.findTalentPoolMessage({
                id: this.pageId,
            });
            this.detailInfo = res.data;
            this.userInfo = res.data.userInfo;
            this.rightInfo = res.data.demandDataS;
        } finally {
            this.loading = false;
        }
    }
    rightInfo = [];
    pageTypeChange(type) {
        this.pageParams.type = type;
        if (type === 1) {
            this.rightInfo = this.detailInfo.demandDataS || [];
        } else if (type === 2) {
            this.rightInfo = this.detailInfo.achievementData || [];
        } else {
            this.rightInfo = this.detailInfo.conversionDataS || [];
        }
    }
    jumpDemandAch(id) {
        if (this.pageParams.type === 1) {
            this.$router.push({ name: "demandDetail", query: { id } });
        } else {
            this.$router.push({ name: "achievementDetail", query: { id } });
        }
    }
}
</script>

<style lang="scss">
.container-talentDetail {
    .page-content {
        padding: 30px 0;
        display: flex;
        margin: 0 auto;
        width: 1260px;
    }
    .page-content-left {
        width: 600px;
    }
    .list-top {
        box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        border-radius: 8px;
        display: inline-block;
        padding: 20px;
        display: flex;
        align-items: center;
        background-color: #fff;
    }

    .list-left {
        width: 200px;
        flex-shrink: 0;
        text-align: center;
    }
    .list-right {
        flex-grow: 1;
        flex-shrink: 0;
    }
    .list-header {
        width: 100px;
        height: 100px;
        border-radius: 110px;
    }
    .list-user {
        font-weight: bold;
        font-size: 20px;
        color: #333333;
        margin: 10px 0;
    }
    .list-info {
        margin-bottom: 10px;
    }
    .info-title {
        font-size: 16px;
        color: #82848a;
        display: inline-block;
    }
    .info-words {
        font-size: 16px;
        color: #333;
        display: inline-block;
        vertical-align: top;
        max-width: 200px;
    }
    .talent-info-box {
        box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
    }
    .talent-panel-title {
        font-weight: bold;
        font-size: 20px;
        color: #2f65f3;
    }
    .talent-info-title {
        font-weight: bold;
        font-size: 18px;
        color: #82848a;
        margin: 30px 0 4px 0;
    }
    .talent-info-words {
        font-size: 14px;
        color: #102040;
    }
    .talent-info-imgbox {
        width: 48%;
        display: inline-flex;
        margin-right: 4%;
        margin-bottom: 20px;
        height: 150px;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }
    .talent-info-imgbox:nth-child(2n) {
        margin-right: 0;
    }
    .talent-info-img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
    }
    .auth-type {
        margin-left: 10px;
    }

    .page-content-right {
        background-color: #fff;
        flex-grow: 1;
        margin-left: 20px;
        box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.1);
        padding: 20px;
        border-radius: 8px;
    }
    .type-panel {
        border-bottom: solid 1px #eee;
    }
    .type-list {
        font-size: 16px;
        border-bottom: solid 3px transparent;
        cursor: pointer;
        margin-right: 20px;
        font-weight: bold;
        display: inline-block;
        color: #333;
        padding-bottom: 5px;
    }
    .type-list-sel {
        border-bottom: solid 3px #2f65f3;
        color: #2f65f3;
    }

    .an-left {
        width: 300px;
        height: 210px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .an-left-bg {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
    }
    .an-list {
        display: flex;
        align-items: center;
        border-bottom: solid 1px #eee;
        box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        margin-top: 20px;
    }
    .an-l-title {
        font-weight: bold;
        font-size: 18px;
        color: #333333;
    }
    .an-l-type {
        margin-top: 10px;
    }
    .an-l-info {
        font-size: 14px;
        color: #333;
        margin-top: 10px;
    }
    .an-l-bottom {
        font-size: 14px;
        color: #505050;
        margin-top: 20px;
    }
    .page-bottom {
        background-color: #fff;
    }
    .page-bottom-content {
        padding: 40px 0;
        margin: 0 auto;
        width: 1260px;
    }
    .page-bottom-list {
        width: 24%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 150px;
        box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.1);
        margin-right: 1%;
        border-radius: 8px;
    }
    .page-bottom-box {
        
    }
    .page-bottom-title {
        font-weight: bold;
        font-size: 26px;
        color: #132042;
        text-align: center;
        margin-bottom: 40px;
    }
    .page-bottom-bg {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
    }
    .evaluate-ico {
        margin-right: 5px;
        color: #ffd706;
    }
}
</style>
